<template>
    <!--弹窗-->
    <div class="hidden_area">
      <div   class="searchbox searchBox flex-box flex-box-vertical" style="height:100%;display:none;" >
        <form id="searchForm" action="/search">
          <div class="searchHeader">
            <span v-on:click='iconClose()' class="wap_icon_close"><icon class=" iconClose" name="close"  viewBox="10 10 1000 1000 "></icon></span> 
            <div class="search_container">
              <input @keyup.enter='jumpSearch()'  class="searchinput" id="in" name="word" v-bind:placeholder='item.WAP_search.data.content["0"].ad_content_title' type="search" /> 
              <span v-on:click='jumpSearch()'   class="search_button "><icon class="searchButton" name="searchindex"  viewBox="10 10 1000 1000 "></icon></span>
            </div>
          </div>
        </form>
        <div class="search_hot searchHot">
          <p>	热门搜索：</p>
          <div class="hotTips">
            <a href="javascript:void(0);"><span>卫衣</span></a>
            <a href="javascript:void(0);"><span>大衣</span></a>
            <a href="javascript:void(0);"><span>牛仔裤</span></a>
            <a href="javascript:void(0);"><span>春新品</span></a>
            <a href="javascript:void(0);"><span>运动鞋</span></a>
            <a href="javascript:void(0);
            "><span>斜挎包</span></a> 
          </div>
        </div>
      </div>
</div>
</template>
<style>
    @import './../css/searchBox.css';
</style>
<script>
    import {
        TransferDom,
        Popup,
        Group,
        XSwitch,
        Scroller,
        Loading,
        Panel,
        XImg,
        Grid,
        GridItem,
        GroupTitle
    } from 'vux';
    export default {
        name: 'searchBox',
        components: {
            TransferDom,
            Popup,
            Group,
            XSwitch,
            Scroller,
            Loading,
            Panel,
            XImg,
            Grid, 
            GridItem,
            GroupTitle
        },
        data() {
            return {
                item: {},
                pannel: {},
                selected: true,
                show: false,
                info: "",
                data: [],
                secondData: [],
                word:[]
            }
        },
        //定义这个sweiper对象  
        computed: {

        },
        methods: {
            jumpSearch() {
                var input_value = document.querySelector(".searchinput").value;
                location.href = location.href + "search?word=" + (input_value); 
            },


            iconClose() {
                document.querySelector('.searchbox').style.display = 'none';
                document.querySelector('.bg_wap_frame').style.display = 'block'
            },
            searchBoxs() {
                // bg_wap_frame
                document.querySelector('.bg_wap_frame').style.display = 'none'
                document.querySelector('.searchbox').style.display = 'block';
            },
        },
            mounted: function() {
                this.$http.get("index.php/dvert/getDvertInfo?siteMark=wap_index&ts=1503969642").then(function(data) {
                    var items = Function(data.body + ";return adList;")();
                    // debugger;
                    this.item = items;
                    console.log(this.item);
                });
            }
        }
</script>